<template>
  <!-- 在子组件模板中添加 ref -->
  <div class="engage-detail" ref="engage-detail">
    <!-- 左侧信息区域 -->
    <div class="engage-detail__info">
      <!-- 平台图标和名称 -->
      <div class="engage-detail__header">
        <div class="engage-detail__icon">
          <img :src="platformIcon" alt="Platform Icon" />
        </div>
        <div class="engage-detail__platform-name">{{ platformName }}</div>
      </div>

      <!-- 统计数据 -->
      <div class="engage-detail__stats">
        <!-- 第一个统计项 -->
        <div class="engage-detail__stat-item">
          <div class="engage-detail__stat-value">{{ statItem1.value }}</div>
          <div class="engage-detail__stat-label">{{ statItem1.label }}</div>
        </div>
        <!-- 第二个统计项 -->
        <div class="engage-detail__stat-item">
          <div class="engage-detail__stat-value">{{ statItem2.value }}</div>
          <div class="engage-detail__stat-label">{{ statItem2.label }}</div>
        </div>
      </div>
    </div>

    <!-- 右侧图表区域 -->
    <div class="engage-detail__chart-container">
      <PieChart
        :option="generateChartOption()"
        :height="chartHeight"
        :width="chartWidth"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  props: {
    platformIcon: {
      // 平台图标（图片路径）
      type: String,
      required: false,
    },
    platformName: {
      // 平台名称（文本）
      type: String,
      required: false,
    },
    statItem1: {
      type: Object,
      required: false,
      default: () => ({ label: "Followers", value: "193" }), // 修改默认值
    },
    statItem2: {
      type: Object,
      required: false,
      default: () => ({ label: "", value: "" }), // 修改默认值
    },
    chartData: {
      type: Array,
      required: false, // 改为非必需
      default: () => [],
    },
    chartLegend: {
      type: Array,
      required: false, // 改为非必需
      default: () => [],
    },
  },
  data() {
    return {
      mediaSwitch: true,
      chartWidth: "100%", // 初始宽度
      chartHeight: "1.1528rem", // 保持固定高度或动态计算
    };
  },
  mounted() {
    this.calculateChartSize(); // 初始化尺寸
    window.addEventListener("resize", this.calculateChartSize); // 监听窗口缩放
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateChartSize); // 移除监听
  },
  methods: {
    // 动态生成 ECharts 配置
    generateChartOption() {
      return {
        tooltip: {
          trigger: "item",
        },
        // 关键修正：legend.data 的 name 必须与 series.data 的 name 完全一致
        legend: [
          {
            orient: "vertical",

            left: "0%", // 使用百分比定位
            top: "15%",

            itemWidth: 24,
            itemHeight: 24,
            itemGap: 10,
            textStyle: {
              color: "#454545",
              fontSize: 14, // 调整文字大小（默认12px）
              fontWeight: "500", // 可选：文字粗细
              padding: [0, 0, 0, 4], // 文字内边距（上右下左），左侧留出8px间距
            },
            formatter: (name) => {
              const item = this.chartData.find((item) => item.name === name);
              return item + "k" ? item.value + "k" : "0"; // 若无数据，显示0
            },
            // 动态映射父组件传递的图例数据
            data: this.chartLegend.map((item) => ({
              name: item.name,
              icon: `image://${require(`@/assets/${item.icon}`)}`, // 动态加载图标
              textStyle: { color: "#454545" },
            })),
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["75%", "50%"],
            radius: ["25%", "100%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "inside",
              formatter: function (params) {
                const percent = Math.round(params.percent); // 关键：取整处理
                // const name = params.name; // 若不需要名称，可注释
                return `${percent}%`; // 仅显示整数百分比
              },
              distance: 0, // 调整标签与饼图边缘的距离
              padding: [0, 0, 0, 0], // 调整标签内边距
              textStyle: {
                color: "#fff", // 统一设置为深灰色
                fontSize: 14, // 可选：调整字体大小
                // weight:800
              },
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
            },
            emphasis: {
              scale: false,
              label: {
                show: true,
                // fontSize: 40,
                // fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            // 动态映射父组件传递的图表数据
            data: this.chartData.map((item) => ({
              value: item.value,
              name: item.name,
              itemStyle: { color: item.color },
            })),
          },
        ],
      };
    },
    calculateChartSize() {
      this.$nextTick(() => {
        if (this.$refs["engage-detail"]) {
          const containerWidth = this.$refs["engage-detail"].offsetWidth;
          this.chartWidth = `${Math.min(containerWidth * 0.6, 200)}px`;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.engage-detail {
  padding: 16px;
  // display: flex; /* 新增：水平布局 */
  // align-items: center; /* 新增：垂直居中 */
  // gap: 24px; /* 新增：信息区与图表间距 */
}

.engage-detail__info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  // gap: 8px; /* 标题与统计数据间距 */
}

.engage-detail__header {
  display: flex;
  align-items: center;
  gap: 16px; /* 图标与名称间距 */
}

.engage-detail__icon {
  width: 36px; /* 假设图标尺寸 */
  height: 36px;
  img {
    width: 36px; /* 假设图标尺寸 */
    height: 36px;
  }
}

.engage-detail__platform-name {
  font-weight: 600;
  font-size: 18px;
  color: #232323;
}

.engage-detail__stats {
  display: flex;
  flex-direction: column;
//  flex-direction: row; /* 改为水平排列 */
  justify-content: flex-end; /* 子项右对齐 */
  align-items: flex-end; /* 子项垂直起点对齐（避免垂直居中） */
  gap: 8px; /* 统计项间距 */
  font-size: 12px;
  color: #6a6969;
  .engage-detail__stat-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #454545;
    .engage-detail__stat-value {
      font-size: 14px;
      font-weight: 600;
      color: #454545;
    }
    .engage-detail__stat-label {
      font-size: 14px;
      font-weight: 600;
      color: #454545;
    }
  }
  .engage-detail__stat-icon {
    width: 4px;
    height: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.engage-detail__chart-container {
  flex-shrink: 0; /* 图表不压缩 */
}
</style>
